<template>
  <div class="attr pl20">
    <p class="f18 mb24">商品价格属性</p>
    <el-form :model="form" ref="formRef" label-width="96" style="width: 100%" :scroll-to-error="true">
      <el-form-item label="有无模型" prop="isModel" :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }">
        <div class="model-wrap" :style="{ width: itemWidth }">
          <header class="pl20 pr20">
            <el-radio-group v-model="form.isModel">
              <el-radio :value="1" :label="1">有模型</el-radio>
              <el-radio :value="0" :label="0">无模型</el-radio>
            </el-radio-group>
          </header>

          <!-- 模型上传 -->
          <div class="upload-wrap pd16" v-if="form.isModel === 1">
            <el-upload
              ref="uploadModel"
              list-type="picture-card"
              v-model:file-list="modelList"
              multiple
              :auto-upload="false"
              :on-change="
                (file, fileList) => {
                  handleAvatarChangeIcon(file, fileList, 'model');
                }
              "
            >
              <div style="display: flex; flex-direction: column; align-items: center; color: #86909c">
                <el-icon class="f24"><Plus /></el-icon>
                <p class="f12" style="line-height: 22px; color: #86909c">点击上传</p>
              </div>

              <template #file="{ file }">
                <div>
                  <div
                    class="el-upload-list__item-thumbnail"
                    style="background-color: #f2f3f5; border-radius: 6px; padding: 4px 10px; box-sizing: border-box"
                  >
                    <img
                      src="@/assets/images/file.png"
                      class="ml5"
                      alt=""
                      width="50"
                      height="50"
                      style="vertical-align: bottom"
                    />
                    <span class="f12 model-name" :title="file.name">{{ file.name }}</span>
                  </div>

                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-download" @click="downloadFile(file.modelUrl)">
                      <el-icon><Download /></el-icon>
                    </span>
                  </span>

                  <div class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <div class="el-icon">
                      <img src="@/assets/images/del-icon.png" alt="" width="10" height="10" />
                    </div>
                  </div>
                </div>
              </template>
            </el-upload>
            <p class="f12" style="color: #86909c">
              可上传多个模型文件，如：酷家乐、三维家Sunvega、3Dmax、sketchup、fdx、skp、glb、3dm、3DS、OBJ等等
            </p>
          </div>

          <!-- 模型授权链接或型号 -->
          <div class="model-input pd16" v-if="form.isModel === 1">
            <p>模型授权链接或型号</p>
            <el-input
              v-model="form.modelRemark"
              style="width: 100%"
              :rows="4"
              type="textarea"
              placeholder="方便被授权者在对应平台中快速查询到此模型，可精准的输入对应平台的链接或型号说明！"
            />
          </div>
        </div>
      </el-form-item>

      <!-- 定制模版 -->
      <el-form-item label="定制" prop="customType" :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }">
        <div class="custom-content" :style="{ width: itemWidth }">
          <div>
            <header>
              <el-radio-group v-model="form.customType">
                <el-radio :value="2">支持定制</el-radio>
                <el-radio :value="1">不支持定制</el-radio>
              </el-radio-group>
            </header>
            <div class="list-wrap" v-if="form.customType === 2">
              <div>
                <header class="jzt-flex-bt">
                  <div class="jzt-flex-center">
                    <p class="mr10">当前定制模板</p>
                    <el-select
                      v-model="form.customTemplateId"
                      placeholder="请选择"
                      style="width: 240px"
                      @change="getTemplateDetailFun"
                      @visible-change="getCustomListFun"
                    >
                      <el-option
                        v-for="item in customList"
                        :key="item.customTemplateId"
                        :label="item.templateName"
                        :value="item.customTemplateId"
                      />
                    </el-select>
                  </div>
                  <div>
                    <el-button type="primary" @click="toPath('/shopConfig/customization/add')">新建定制模板</el-button>
                  </div>
                </header>
                <div class="list">
                  <div
                    v-for="(item, index) in _optionInfo?.editDetailInfo?.customTemplate?.templateDetailList"
                    :key="item.templateDetailId"
                  >
                    <div class="list-item jzt-flex-bt" v-if="isShowMoreCustom ? true : index < 2">
                      <p class="name text-over" :title="item.specificationText">{{ item.specificationText || "-" }}</p>
                      <p>
                        单位：{{ useCodeArrStore().getDictName("shop_unit", item.productUnit) }}
                        <span>
                          {{
                            `（每增加${item.addNum}${useCodeArrStore().getDictName("shop_unit", item.productUnit)}/+¥${item.addAmount} 、每减少${item.reduceNum}${useCodeArrStore().getDictName("shop_unit", item.productUnit)}/-¥${item.reduceAmount}）`
                          }}
                        </span>
                      </p>
                      <div class="jzt-flex-center">
                        <span>标准说明：</span>
                        <RemarkEditor v-model="item.standardText" :isEdit="false" />
                      </div>
                    </div>
                  </div>
                  <div
                    class="open-more jzt-flex-center pt10 mb4"
                    v-if="_optionInfo?.editDetailInfo?.customTemplate?.templateDetailList?.length > 2"
                  >
                    <el-button type="primary" link v-if="!isShowMoreCustom" @click="isShowMoreCustom = !isShowMoreCustom">
                      展开更多<el-icon class="ml5"><ArrowDownBold /></el-icon>
                    </el-button>
                    <el-button type="primary" link v-else @click="isShowMoreCustom = !isShowMoreCustom">
                      收起更多<el-icon class="ml5"><ArrowUpBold /></el-icon>
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item v-show="false" label="工厂id" prop="factoryId">
        <el-input v-model="form.factoryId" disabled :style="{ width: itemWidth }"></el-input>
      </el-form-item>
      <el-form-item label="工厂" prop="factoryName">
        <el-input
          v-model.trim="form.factoryName"
          disabled
          :style="{ width: itemWidth }"
          oninput="value = value.replace(/[!|@|#|$|%|^|&|*|+|~|`|,|.|！|￥]/g, '')"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品品牌" prop="brandId" :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }">
        <el-select v-model="form.brandId" placeholder="请选择" :style="{ width: itemWidth }" clearable>
          <el-option v-for="(item, index) in brandOptions" :key="index" :label="item.bandName" :value="item.brandId" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="上市时间"
        prop="appearTime"
        :rules="{ required: false, message: '请选择', trigger: ['blur', 'change'] }"
      >
        <div :style="{ width: itemWidth }">
          <el-date-picker
            v-model="form.appearTime"
            type="date"
            placeholder="请选择"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :style="{ width: '100%' }"
          />
          <p class="f12" style="color: #86909c; line-height: 28px">产品最开始生产日期</p>
        </div>
      </el-form-item>
      <!-- <el-form-item label="工厂市场定位" prop="factoryGrade">
        <el-select v-model="form.factoryGrade" placeholder="请输入" :style="{ width: itemWidth }" clearable>
          <el-option v-for="item in factoryGradeOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue" />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="款式风格" prop="productStyle">
        <el-select v-model="form.productStyle" placeholder="请输入" :style="{ width: itemWidth }">
          <el-option v-for="item in productStyleOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue" />
        </el-select>
      </el-form-item>-->
      <!-- 动态属性项 -->
      <div v-for="(item, index) in attrList" :key="item">
        <!-- 一级 -->
        <el-form-item
          class="attr-form-item"
          :rules="{ required: item.required === 1 ? true : false, message: '请选择', trigger: ['blur', 'change'] }"
          :prop="item.stastsId + '-val2'"
        >
          <template #label>
            <span :title="item.statsTitle">
              <el-popover
                v-if="item.statsTitle === '品质分类'"
                placement="bottom-start"
                :width="500"
                trigger="hover"
                popper-class="mainprod-tips"
              >
                <template #reference>
                  <el-icon style="color: #86909c"><QuestionFilled /></el-icon>
                </template>
                <template #default>
                  <p class="f12">沙发：</p>
                  <p class="f12">
                    经济：<span style="color: #6d6f74">“布每米成本0-20元左右 皮每尺6-10元 ；海绵：40以上高回弹”</span>
                  </p>
                  <p class="f12">
                    舒适：<span style="color: #6d6f74">“布每米成本20-45元左右 皮每尺10-15元；海绵：40以上高回弹”</span>
                  </p>
                  <p class="f12">
                    豪华：<span style="color: #6d6f74">“布每米成本45以上元左右 皮每尺18以上元；海绵：紫罗兰海绵”</span>
                  </p>
                  <p class="f12">床：</p>
                  <p class="f12">经济：<span style="color: #6d6f74">“布每米成本0-20元左右 皮每尺6-10元”</span></p>
                  <p class="f12">舒适：<span style="color: #6d6f74">“布每米成本20-45元左右 皮每尺10-15元”</span></p>
                  <p class="f12">豪华：<span style="color: #6d6f74">“布每米成本45以上元左右 皮每尺18以上元”</span></p>
                </template>
              </el-popover>
              {{ item.statsTitle }}
            </span>
          </template>
          <div style="width: 100%">
            <!-- 一级 -->
            <div class="level2">
              <div v-if="item.stasType === 1">
                <!-- 输入框 -->
                <el-input
                  v-model.trim="form[item.stastsId + '-val2']"
                  placeholder="请输入"
                  oninput="value = value.replace(/[!|@|#|$|%|^|&|*|+|~|`|,|.|！|￥]/g, '')"
                  :style="{ width: itemWidth }"
                ></el-input>
              </div>
              <div v-if="item.stasType === 4">
                <!-- 规范数值输入框 -->
                <jsxCom
                  v-if="form[item.stastsId + '-val2'] || props.optionInfo.actionType === 'add' || item.propTemplate"
                  :str="replaceNS(item.propTemplate, -1)"
                  :viewValueStr="form[item.stastsId + '-val2']"
                  @submit="
                    (strNS, inputArr) => {
                      const ARR = [];
                      strNS.map((obj, index) => {
                        if (inputArr[index] !== undefined) {
                          ARR.push(inputArr[index]);
                        } else if (obj === 'N' || obj === 'S') {
                          ARR.push('');
                        }
                      });
                      form[item.stastsId + '-val2'] = ARR.join(',');
                      console.log('aaaaaaaaaaa属性数据===', strNS, inputArr);
                    }
                  "
                />
                <!--                 
                  v-if="form[item.stastsId + '-val2'] || props.optionInfo.actionType === 'add'"
                  :str="'长【数值】【字符】宽【数值】【字符】高【数值】【字符】【字符】'"
                 -->
              </div>
              <div v-if="item.stasType === 2">
                <!-- 单选   是平台属性并且商品为预发布状态productStatus===1，就可以修改-->
                <el-select
                  v-model="form[item.stastsId + '-val2']"
                  placeholder="请选择"
                  clearable
                  :disabled="
                    optionInfo.actionType === 'add' || optionInfo.actionType === 'copy'
                      ? false
                      : item.isPlatform === 1 && optionInfo?.editDetailInfo?.productStatus !== 1
                  "
                  @change="
                    val => {
                      attrChange2(item, index, val);
                    }
                  "
                  :style="{ width: itemWidth }"
                >
                  <el-option
                    v-for="item1 in item.children"
                    :key="item1.stastsId"
                    :label="item1.statsTitle"
                    :value="item1.stastsId"
                  />
                </el-select>
              </div>
              <div v-if="item.stasType === 3">
                <!-- 多选  是平台属性并且商品为预发布状态productStatus===1，就可以修改-->
                <el-checkbox-group
                  v-model="form[item.stastsId + '-val2']"
                  :disabled="
                    optionInfo.actionType === 'add' || optionInfo.actionType === 'copy'
                      ? false
                      : item.isPlatform === 1 && optionInfo?.editDetailInfo?.productStatus !== 1
                  "
                  @change="
                    val => {
                      attrChange2(item, index, val);
                    }
                  "
                >
                  <el-checkbox
                    v-for="item1 in item.children"
                    :key="item1.stastsId"
                    :label="item1.statsTitle"
                    :value="item1.stastsId"
                  />
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </el-form-item>

        <!-- 二级 -->
        <div v-if="form[item.stastsId + '-val2'] && Level3Lists[index]?.options3.length > 0" class="ml96">
          <template v-for="(item3, index3) in Level3Lists[index].options3" :key="index3">
            <el-form
              class="level3"
              ref="formRef2"
              :model="item3"
              :scroll-to-error="true"
              v-if="
                item3.stasType === 1 ||
                item3.stasType === 4 ||
                (item3.stasType === 2 && item3.children.length > 0) ||
                (item3.stasType === 3 && item3.children.length > 0)
              "
            >
              <el-form-item
                class="attr-form-item"
                label=""
                :rules="{ required: item3.required === 1 ? true : false, message: '请选择', trigger: ['blur', 'change'] }"
                :prop="`selectVal`"
              >
                <div v-if="item3.stasType === 1" style="width: 100%">
                  <!-- 输入框 -->
                  <el-input
                    v-model.trim="item3['selectVal']"
                    placeholder="请输入"
                    oninput="value = value.replace(/[!|@|#|$|%|^|&|*|+|~|`|,|.|！|￥]/g, '')"
                    :style="{ width: itemWidth }"
                  ></el-input>
                </div>
                <div v-if="item3.stasType === 4">
                  <!-- 规范数值输入框 -->
                  <jsxCom
                    :str="replaceNS(item3.propTemplate, -1)"
                    :viewValueStr="item3['selectVal']"
                    @submit="
                      (strNS, inputArr) => {
                        const ARR = [];
                        strNS.map((obj, index) => {
                          if (inputArr[index] !== undefined) {
                            ARR.push(inputArr[index]);
                          } else if (obj === 'N' || obj === 'S') {
                            ARR.push('');
                          }
                        });
                        item3['selectVal'] = ARR.join(',');
                        console.log('bbbbbbbbbbbbbbbb属性数据===', item3, strNS, inputArr);
                      }
                    "
                  />
                </div>
                <div v-if="item3.stasType === 2 && item3.children.length > 0" style="width: 100%">
                  <!-- 单选 -->
                  <el-select
                    v-model="item3['selectVal']"
                    placeholder="请选择"
                    clearable
                    @change="
                      val => {
                        attrChange3(item3, index, val);
                      }
                    "
                    :style="{ width: itemWidth }"
                  >
                    <el-option
                      v-for="_item3 in item3.children"
                      :key="_item3.stastsId"
                      :label="_item3.statsTitle"
                      :value="_item3.stastsId"
                    />
                  </el-select>
                </div>
                <div v-if="item3.stasType === 3 && item3.children.length > 0">
                  <!-- 多选 -->
                  <el-checkbox-group
                    v-model="item3['selectVal']"
                    @change="
                      val => {
                        attrChange3(item3, index, val);
                      }
                    "
                  >
                    <el-checkbox
                      v-for="_item3 in item3.children"
                      :key="_item3.stastsId"
                      :label="_item3.statsTitle"
                      :value="_item3.stastsId"
                    />
                  </el-checkbox-group>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </div>
      </div>

      <!-- 质保  工厂承诺商家质保  商家承诺客户质保-->
      <el-form-item
        class="zb-item"
        label="工厂承诺商家质保"
        prop="warrantyTime"
        :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }"
      >
        <el-input v-model="form.warrantyTime" disabled :style="{ width: itemWidth }">
          <template #suffix>
            <span>月</span>
          </template>
        </el-input>
      </el-form-item>
      <div class="warranty-wrap pl96">
        <div class="select-box" :style="{ width: itemWidth }">
          <!-- 自有商品 -->
          <el-radio-group v-model="form.warrantyFlag" @change="changeWarrantyFlag">
            <div>
              <el-radio :value="1" :label="1">自设质保模板</el-radio>
              <el-radio :value="2" :label="2">没有商品质保</el-radio>
            </div>
            <div>
              <el-button
                type="primary"
                @click="
                  () => {
                    isRefresh = true;
                    toPath('/stencil/warranty/add');
                  }
                "
                >去添加商品质保模板</el-button
              >
              <el-button
                type="primary"
                plain
                @click="
                  () => {
                    isRefresh = true;
                    toPath('/stencil/warranty');
                  }
                "
                >商品质保模板管理</el-button
              >
            </div>
          </el-radio-group>

          <!-- 选择质保模板 -->
          <el-form-item
            v-if="form.warrantyFlag === 1"
            label="选择自设质保模板"
            prop="warrantyId"
            label-width="135"
            :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }"
          >
            <el-select
              v-model="form.warrantyId"
              placeholder="请输入"
              style="width: 100%"
              @change="changeWarranty"
              @visible-change="handleVisibleChange"
            >
              <el-option
                v-for="item in warrantyTempList"
                :key="item.warrantyId"
                :label="item.warrantyName"
                :value="item.warrantyId"
              />
            </el-select>
          </el-form-item>
        </div>
      </div>

      <el-form-item label="产地" class="buiness-address">
        <div
          v-show="producerList.filter(item => item.delTag === 0).length > 0"
          style="display: inline-block"
          :style="{ width: itemWidth }"
        >
          <template v-for="(item, index) in producerList" :key="index">
            <div v-show="item.delTag === 0" style="display: flex">
              <el-cascader
                class="pb10"
                ref="cascaderRef"
                v-model="form._buinessAddress[index]"
                :options="mapList"
                :props="{
                  expandTrigger: 'hover', //次级菜单的展开方式
                  label: 'name',
                  value: 'id'
                }"
                @change="
                  value => {
                    handleChange(value, index);
                  }
                "
                style="width: 90%"
              />
              <span class="ml20 mr20" style="display: inline-block">
                <el-icon class="del-icon" @click="delAddress(item, index)"><Delete /></el-icon>
              </span>
            </div>
          </template>
        </div>

        <el-button link :icon="CirclePlusFilled" type="primary" @click="addAddress" style="height: 32px"> 新增产地 </el-button>
      </el-form-item>

      <el-form-item label="商品显示销量" prop="isShow">
        <el-radio-group v-model="form.isShow">
          <el-radio :value="1" :label="1">显示</el-radio>
          <el-radio :value="0" :label="0">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <!-- <el-button type="primary" @click="getAttrForm">获取基础信息数据</el-button> -->
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from "vue";
import useMultipartOssStore from "@/store/modules/multipartOssStore.js";
const ossStore = useMultipartOssStore();
import {
  replaceNS,
  getFolder,
  _debounce //防抖，多次频繁触发时，只执行最后一次
} from "@/utils/index";
import {
  Delete,
  Download,
  Plus,
  ZoomIn,
  Loading,
  Upload,
  CirclePlusFilled,
  CircleCloseFilled,
  ArrowDownBold,
  ArrowUpBold
} from "@element-plus/icons-vue";
import { regionData } from "element-china-area-data";
import {
  getEnumAll,
  getStastsListAll,
  getBrandListApi,
  imgsUpload,
  getZbTempList,
  getCustomList,
  getTemplateDetail
} from "@/apis/products/specifications";
import china from "@/utils/china.json";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import { orgChildIdFindParent } from "@/utils/index";
import jsxCom from "./jsxCom.vue";
import useCodeArrStore from "@/store/modules/select";
import RemarkEditor from "@/components/RemarkEditor";

const form = ref({
  isModel: 0,
  statsList: [],
  _buinessAddress: [],
  buinessAddress: [],
  isShow: 1,
  warrantyFlag: 1, //有质保
  customType: 2 //是否支持定制 2-支持定制 1-不支持定制
});
const formRef = ref();
const formRef2 = ref();
const rules = ref({
  isModel: [{ required: true, message: "请选择", trigger: "blur" }],
  appearTime: [{ required: true, message: "请选择", trigger: "blur" }]
});
const factoryGradeOptions = ref([]);
const productStyleOptions = ref([]);
const customTypeOptions = ref([]);
const brandOptions = ref([]);
const attrList = ref([]);
const producerList = ref([{ delTag: 0 }]);
const mapList = ref(china);
const cascaderRef = ref();
const _optionInfo = ref({});
const warrantyTempList = ref([]);
const isRefresh = ref(false);
const customList = ref([]); //定制模版列表
const isShowMoreCustom = ref(false);

const props = defineProps({
  categoryId: {
    type: String,
    default: ""
  },
  Enums: {
    type: Array,
    default: () => []
  },
  optionInfo: {
    type: Object,
    default: () => {}
  },
  itemWidth: {
    type: String,
    default: "80%"
  }
});

watch(
  () => props.categoryId,
  val => {
    if (val) {
      //清空数据
      form.value = {
        isModel: 0,
        statsList: [],
        _buinessAddress: [],
        buinessMerchantAddress: [],
        isShowSale: 1,
        warrantyFlag: 1 //沿用质保
      };
      //属性tree数据
      const productId = route.query.productId;
      if (!productId) {
        getAttrList(val);
        getBrandList();
        getZbTempListFun(); //查询质保模板
        getFactoryInfo();
      }
    }
  }
);
watch(
  () => props.Enums,
  val => {
    if (val) {
      // console.log("数据字典====", val);
      //工厂市场定位-shop_product_factory_grade
      factoryGradeOptions.value = val.filter(item => {
        if (item.dictType === "shop_product_factory_grade") {
          return item;
        }
      })[0].dictDataList;

      //款式风格-shop_product_style
      productStyleOptions.value = val.filter(item => {
        if (item.dictType === "shop_product_style") {
          return item;
        }
      })[0].dictDataList;

      //定制-shop_product_custom_type
      customTypeOptions.value = val.filter(item => {
        if (item.dictType === "shop_product_custom_type") {
          return item;
        }
      })[0].dictDataList;
    }
  }
);
watch(
  () => props.optionInfo,
  async val => {
    if (val) {
      if (val.actionType === "edit" || val.actionType === "copy" || val.actionType === "re-applay") {
        _optionInfo.value = JSON.parse(JSON.stringify(val));
        getBrandList();
        getZbTempListFun(); //查询质保模板
        await getAttrList(val.editDetailInfo.categoryId, true);
        console.log("attr的详情数据====", _optionInfo.value);
        dateReview(); //数据回显
        getFactoryInfo();
      }
    }
  },
  { deep: true }
);

onMounted(async () => {
  getCustomListFun();
});

const getTemplateDetailFun = val => {
  getTemplateDetail({ customTemplateId: val }).then(res => {
    if (res.code === 200) {
      if (_optionInfo.value.editDetailInfo.customTemplate === null) {
        _optionInfo.value.editDetailInfo.customTemplate = {};
      }
      _optionInfo.value.editDetailInfo.customTemplate.templateDetailList = res.data.templateDetailList || [];
    }
  });
};

const getCustomListFun = () => {
  getCustomList().then(res => {
    customList.value = res.data;
  });
};

const getFactoryInfo = () => {
  const useinfo = JSON.parse(localStorage.getItem("userinfo"));
  form.value.factoryId = useinfo.tenantId || "--";
  form.value.factoryName = useinfo.tenantName || "--";
};

const toPath = url => {
  // router.push({ path: url });
  const routeUrl = router.resolve({
    path: url
  });
  window.open(routeUrl.href, "_blank");
};

const changeWarrantyFlag = val => {
  // val:number ==  0：不沿用工厂质保 1：沿用工厂质保 2：没有质保
  form.value.warrantyTime = "";
  form.value.warrantyId = "";
  form.value.warrantyName = "";
  setTimeout(() => {
    formRef.value.clearValidate("warrantyId");
  }, 20);

  if (val === 0) {
    // 不沿用工厂质保，自己选质保模板
  } else if (val === 1) {
    //沿用工厂质保  编辑接口返回的工厂质保数
    form.value.warrantyTime = _optionInfo.value.editDetailInfo.factoryWarrantyTime || 0;
  } else if (val === 2) {
    //没有质保
    form.value.warrantyTime = 0;
  }
};

const changeWarranty = val => {
  const obj = warrantyTempList.value.find(item => item.warrantyId === val);
  form.value.warrantyTime = obj.warrantyTime;
  form.value.warrantyName = obj.warrantyName;
};

const handleVisibleChange = val => {
  if (val) {
    if (isRefresh.value) {
      getZbTempListFun(); //重新查询质保模板list
    }
  }
};

//获取质保模板
const getZbTempListFun = () => {
  getZbTempList({}).then(res => {
    if (res.code === 200) {
      warrantyTempList.value = res.data || [];
    }
    // console.log("这是质保模板list", res.data);
  });
};

//获取商品品牌
const getBrandList = () => {
  getBrandListApi({ type: 1 }).then(res => {
    if (res.code === 200) {
      brandOptions.value = res.data;
      isRefresh.value = false;
    }
  });
  // brandOptions.value = [
  //   {
  //     name: "111111",
  //     value: 1
  //   },
  //   {
  //     name: "222222",
  //     value: 2
  //   }
  // ];
};

const dateReview = () => {
  const { editDetailInfo } = _optionInfo.value;
  form.value.isModel = editDetailInfo.isModel; //有无模型
  form.value.customType = editDetailInfo.customType; //是否定制
  form.value.customTemplateId = editDetailInfo.customTemplateId; //当前定制模板
  form.value.modelFileId = editDetailInfo.modelFileId;
  form.value.modelFileUrl = editDetailInfo.modelFileUrl;
  form.value.factoryId = editDetailInfo.factoryId; //工厂id
  form.value.brandId = editDetailInfo.brandId; //商品品牌
  form.value.appearTime = editDetailInfo.appearTime; //上市时间
  form.value.factoryGrade = editDetailInfo.factoryGrade ? String(editDetailInfo.factoryGrade) : ""; //工厂市场定位
  // form.value.productStyle = editDetailInfo.productStyle ? String(editDetailInfo.productStyle) : ""; //款式风格
  form.value.warrantyFlag = Number(editDetailInfo.warrantyFlag); //质保模板状态 1:有质保 2：没有质保
  form.value.warrantyId = String(editDetailInfo.warrantyId); //质保模板id
  form.value.warrantyName = String(editDetailInfo.warrantyName); //质保模板name
  form.value.warrantyTime = editDetailInfo.warrantyTime || 0; //质保时间
  form.value.isShow = Number(editDetailInfo.isShow); //商品显示销量

  //模型回显
  modelList.value = editDetailInfo?.modelFile?.modelFileList?.map(item => {
    return {
      url: item.url,
      modelUrl: item.url,
      uid: item.fileId,
      name: item.fileName
    };
  });
  form.value.modelRemark = editDetailInfo?.modelFile?.modelRemark;

  console.log("属性列表===", attrList.value);
  const stastsIdArr = [];
  let Index = 0;
  const apiStats = editDetailInfo.statsList.map(item => item.stastsId);
  // for (let index in editDetailInfo.statsList) {
  for (let index in attrList.value) {
    if (apiStats.includes(attrList.value[index].stastsId)) {
      const Arr = editDetailInfo.statsList.filter(item2 => item2.stastsId === attrList.value[index].stastsId);
      for (let index3 in Arr) {
        const Item = Arr[index3];

        if (stastsIdArr.includes(Item.stastsId)) continue; //如果遇到重复的属性，本次循环结束，直接进入下一次循环

        let _Item = attrList.value.filter(item => item.stastsId === Item.stastsId)[0];
        let val2 = [Item.topStastId || Item.stastsValId]; //二级的选中id值，如果是输入框，就传上一级的id值
        let productStastIds = Item.productStastId + "-" + Item.topStastId + "-" + Item.stastsValId;

        const _stastsIdArr = attrList.value.filter(item => item.stastsId === Item.stastsId);
        if (_stastsIdArr.length > 0) {
          //多个相同的属性值
          const sameItemArr = editDetailInfo.statsList.filter(item => item.stastsId === Item.stastsId);
          const _val = sameItemArr.map(item => item.topStastId || item.stastsValId);
          const _productStastIds = sameItemArr.map(item => item.productStastId + "-" + item.topStastId + "-" + item.stastsValId);
          val2 = _val;
          productStastIds = _productStastIds;
        }
        // console.log(33333333333333, _Item, index, val2);
        attrChange2(_Item, Index, val2, productStastIds);

        /**
         * 渲染二级输入框
         */
        if (Item.stastsId === Item.stastsValId && (Item.stasType === 1 || Item.stasType === 4)) {
          form.value[Item.stastsId + "-val2"] = Item.stastsVal;
        }

        stastsIdArr.push(Item.stastsId);
      }
    }

    Index++;
  }
  /**渲染2级单选、多选  和3级*/
  for (let index in Level3Lists.value) {
    const item = Level3Lists.value[index];
    // console.log("Level3Lists===item", item);
    if (item?.options3?.length > 0) {
      const obj = item.options3;
      const parentArr = orgChildIdFindParent(obj[0].stastsId, attrList.value, "stastsId");
      // console.log("找到父级了===", parentArr);

      /**渲染2级 */
      if (parentArr[0].stasType === 3) {
        const ids = obj.map(_item => _item.stastsId);
        // 多选
        form.value[parentArr[0].stastsId + "-val2"] = ids;
      } else {
        form.value[parentArr[0].stastsId + "-val2"] = obj[0].stastsId;
      }

      /**渲染3级 */
      for (let item3 of item.options3) {
        const resObjArr = editDetailInfo.statsList.filter(_item => {
          if (_item.topStastId) {
            if (item3.stastsId === _item.topStastId) {
              return _item;
            }
          } else {
            if (item3.stastsId === _item.stastsValId) {
              return _item;
            }
          }
        });
        const val3 =
          item3.stasType === 3
            ? resObjArr.map(item => item.stastsValId)
            : item3.stasType === 2
              ? resObjArr[0].stastsValId
              : resObjArr[0].stastsVal;
        attrChange3(item3, index, val3, item3.productStastIds);
      }
    }
  }

  /**渲染产地 */
  form.value.buinessAddress = editDetailInfo.buinessAddress;
  producerList.value = editDetailInfo.buinessAddress;
  form.value._buinessAddress = editDetailInfo.buinessAddress.map(item => item.buinessAddressId.split(",").map(Number));
  // console.log(111111111111111, form.value);
};

const getAttrList = async (val, filter) => {
  await getStastsListAll({ categoryId: val }).then(res => {
    if (res.code === 200) {
      attrList.value = res.data;
      const arr = attrList.value.filter(item => {
        if (item.stasType === 1 || item.stasType === 4 || item.children.length > 0) {
          // 只返回一级为输入框，或者一级为单选多选但是二级没有数据的属性
          return item;
        }
      });
      attrList.value = arr;
      if (filter) {
        // console.log("!!!!!!!!!!!!回显需求，只保留接口返回的属性===", editDetailInfo.statsList);
        // const { editDetailInfo } = _optionInfo.value;
        // const apiStats = editDetailInfo.statsList.map(item => item.stastsId);
        // const Arr = attrList.value.filter(_item => apiStats.includes(_item.stastsId));
        // attrList.value = Arr;
      }
      Level3Lists.value = Array(attrList.value.length).fill(undefined);
      // console.log("属性值===", attrList.value);
      // 编辑的时候，回显
      // attrChange2(attrList.value[0], 0, form.value["1791314152700575744-val2"]);
    }
  });
};

const Level3Lists = ref([]);
const attrChange2 = (item, index, val, productStastIds = []) => {
  const Item = JSON.parse(JSON.stringify(item?.children || "")); //这是初始数据
  let Val = JSON.parse(JSON.stringify(val || ""));
  if (!Array.isArray(Val)) Val = [Val];
  if (Val.length <= 0) {
    // 如果2级一个都没有选择，那么3级的个数options设置为0
    Level3Lists.value[index] = {};
    Level3Lists.value[index].options3 = [];
    return;
  }

  let selectLevel2 = [];
  let haveArr = []; //已经存在于option3的数据，在option3中筛选出来，不再从初始数据Item中筛选
  let newArr = []; //不存在于option3的数据，从初始数据中Item筛选
  if (Level3Lists.value[index]?.options3?.length > 0) {
    // 如果存在options3，先在这里面查找符合要求的数据
    haveArr = Level3Lists.value[index]?.options3.filter(_item => {
      if (Val.includes(_item.stastsId)) {
        const _valIndex = Val.findIndex(_item2 => _item2 === _item.stastsId);
        Val.splice(_valIndex, 1);
        const obj = _item;
        obj.productStastIds = productStastIds;
        return obj;
      }
    });
  }
  newArr = Item.filter(_item => {
    if (Val.includes(_item.stastsId)) {
      const obj = _item;
      obj.productStastIds = productStastIds;
      return obj;
    }
  });
  // console.log("aaaaaaaaaa", haveArr, newArr);
  selectLevel2 = [...haveArr, ...newArr];

  Level3Lists.value[index] = {};
  Level3Lists.value[index].options3 = selectLevel2;
  console.log("当前选中节点2===Level3Lists===", Level3Lists.value);
};
const attrChange3 = (item3, index, val) => {
  console.log(333333333333333, item3);
  const selectLevel3 = item3.children.filter(_item => {
    if (val.includes(_item.stastsId)) {
      return _item;
    }
  });
  item3.selected3 = selectLevel3;
  item3.selectVal = val;
  // console.log(44444444444444, Array.isArray(item3.selectVal));
  let _productStastIds = [];
  const selectValIsArr = Array.isArray(item3.selectVal); //val3是否是数组（是否多选）
  for (let _item of item3.productStastIds) {
    if (selectValIsArr) {
      // 选中的值是数组-多选
      for (let __item of item3.selectVal) {
        if (_item.includes(__item)) {
          _productStastIds.push(_item);
        }
      }
    } else {
      //选中的值是字符串-单选、输入框
      if (item3.stasType === 1 || item3.stasType === 4) {
        // 输入框、标准数值输入
        if (_item.includes(item3.stastsId)) {
          _productStastIds = [_item];
        }
      } else {
        if (_item.includes(item3.selectVal)) {
          _productStastIds = [_item];
        }
      }
    }
  }
  item3._productStastIds = _productStastIds;

  console.log("当前选中节点3===Level3Lists===", Level3Lists.value);
};

//新增一个产地项
const addAddress = () => {
  producerList.value.push({ delTag: 0 });
};
//删除一个产地项
const delAddress = (item, index) => {
  // const _producerList = JSON.parse(JSON.stringify(producerList.value));
  // if (producerList.value.length <= 1) return;

  if (props.optionInfo.actionType === "add") {
    form.value.buinessAddress.splice(index, 1);
    form.value._buinessAddress.splice(index, 1);
    producerList.value.splice(index, 1);
    // producerList.value = _producerList;
  } else {
    item.delTag = 1;
  }

  console.log("产地===", producerList.value);
};
const handleChange = (value, index) => {
  console.log("producerList", value, index);
  const nodes = cascaderRef.value[index].getCheckedNodes();
  if (!form.value.buinessAddress) {
    form.value.buinessAddress = [];
  }
  // console.log("找到了当前选中的节点数据===", form.value.buinessAddress);
  form.value.buinessAddress[index] = {
    buinessAddressId: nodes[0].pathValues.join(","),
    buinessAddress: nodes[0].pathLabels.join(","),
    delTag: producerList.value[index].delTag
  };
  console.log("表单数据===", producerList.value, form.value);
};

//====================================图片上传========================================================================================

const modelList = ref([]);
const uploadModel = ref();

const handleRemove = file => {
  uploadModel.value.handleRemove(file);
};

const handleAvatarChangeIcon = _debounce(async (file, fileList, type = "img") => {
  //选中文件触发的change事件
  console.log("触发模型上传===", file);
  let _fileList = fileList.filter(item => item.status === "ready"); //未上传成功的图片
  const flag = fileType(type, _fileList);
  if (!flag) {
    const errorFile = [];
    const successFile = [];
    if (type === "model") {
      ElMessage({
        message: "只能上传glb、gltf的模型文件或压缩文件",
        type: "error",
        offset: 60
      });

      for (let item of _fileList) {
        if (!isModelFile(item.raw.name)) {
          errorFile.push(item);
        } else {
          successFile.push(item);
        }
      }
      for (let item of errorFile) {
        uploadModel.value.handleRemove(item);
      }
    }
    if (successFile.length <= 0) return;
  }
  if (type === "model") {
    modelList.value = fileList;
    for (let item of _fileList) {
      await customUpload(item, { file: item }, type);
    }
  }
}, 100);
/**
 * 校验文件类型
 */
const fileType = (type, fileList) => {
  let flag = true;
  if (type === "img") {
    for (let item of fileList) {
      if (!(item.raw.type === "image/jpeg" || item.raw.type === "image/png")) {
        flag = false;
      }
    }
  } else if (type === "video") {
    for (let item of fileList) {
      if (!(item.raw.type === "video/mp4")) {
        flag = false;
      }
    }
  } else if (type === "model") {
    for (let item of fileList) {
      if (!isModelFile(item.raw.name)) {
        flag = false;
      }
    }
  }
  return flag;
};
const isModelFile = fileName => {
  const modelExtensions = [
    ".glb",
    ".stl",
    ".obj",
    ".fbx",
    ".gltf",
    ".dae",
    ".3ds",
    ".igs",
    ".iges",
    ".stp",
    ".step",
    ".wrl",
    ".dwg",
    ".max",
    ".blend",
    ".zip",
    ".rar",
    ".7z",
    ".tar",
    ".gzip",
    ".tgz",
    ".tar.gz",
    ".tar.bz2"
  ];
  const extension = fileName.slice(fileName.lastIndexOf(".")).toLowerCase();
  return modelExtensions.includes(extension);
};
/**
 * 上传
 */
const getFileName = name => {
  const arr = name.split(".");
  const _arr = JSON.parse(JSON.stringify(arr));
  let _name = "";
  let _suffix = "";
  if (arr.length > 2) {
    _arr.splice(_arr.length - 1, 1);
    _name = _arr.join(".");
    _suffix = arr[arr.length - 1];
  } else {
    _name = arr[0];
    _suffix = arr[1];
  }
  const folder = getFolder();
  return folder + _name + new Date().getTime() + "." + _suffix;
};
const customUpload = async (item, option, type) => {
  // 合并已上传和当前上传文件
  const objName = getFileName(option.file.name);
  await ossStore
    .submit(objName, option.file.raw)
    .then(async res => {
      await ossStore.setACL(objName, fileReadRole.publicRead);
      res.fileUrl = await ossStore.signatureUrl(objName);
      console.log("文件上传成功，地址为===", res.fileUrl);
      // form.value["modelFileUrl"] = res.fileUrl.split("?")[0];
      // form.value["modelFileId"] = option.file.uid;
      item["folder"] = objName;
      item["modelUrl"] = res.fileUrl.split("?")[0];

      const Option = JSON.parse(JSON.stringify(option));
      uploadIMG(Option); //文件上传到业务端
    })
    .catch(err => {
      alert(JSON.stringify(err));
    });
};
//将图片上传到业务端服务
const uploadIMG = option => {
  const nameArr = option.file.name.split(".");
  const uploadArr = [
    {
      fileId: option.file.uid,
      objectName: option.file.folder, //目录＋文件名称
      url: option.file.modelUrl,
      access: "public-read",
      fileName: option.file.name, //文件名称
      bucketName: "51-jzt-dev",
      size: option.file.size,
      type: true,
      suffix: nameArr[nameArr.length - 1]
    }
  ];
  imgsUpload(uploadArr).then(res => {
    console.log(909090, res);
  });
};
/**
 * 下载附件
 */
const downloadFile = url => {
  console.log("这是下载附件操作", url);
  const urlSplit = url ? url.split("/") : [];
  const name = urlSplit[urlSplit.length - 1];
  let xhr = new XMLHttpRequest();
  xhr.open("get", url, true);
  xhr.responseType = "blob";
  xhr.onload = function (e) {
    if (xhr.status === 200) {
      let file = xhr.response;
      let fileName = name;
      if ("msSaveOrOpenBlob" in navigator) {
        window.navigator.msSaveOrOpenBlob(file, fileName);
      } else {
        let fileUrl = window.URL.createObjectURL(file);
        let a = document.createElement("a");
        a.download = fileName;
        a.href = fileUrl;
        document.getElementsByTagName("body")[0].appendChild(a);
        a.click();
        a.parentNode.removeChild(a);
        window.URL.revokeObjectURL(fileUrl);
      }
    }
  };
  xhr.send();
};
const fileReadRole = {
  defaultRole: "",
  privateRole: "private",
  publicRead: "public-read",
  publicReadWrite: "public-read-write"
};
const myValidator = async () => {
  const ref2 = formRef2.value;
  let isAllow = true;
  if (!ref2) return isAllow;
  for (let item of ref2) {
    await item.validate((valid2, fields2) => {
      if (!valid2) {
        isAllow = false;
        // Object.keys(fields2).forEach((key, i) => {
        //   if (i == 0) {
        //     const firstFiled = fields2[key][0].field;
        //     item.scrollToField(firstFiled);
        //   }
        // });
        ElMessage({
          message: "请将必填项填写后再预览商品"
        });
      }
    });
  }

  //有模型的时候，校验是否上传了文件或者模型授权链接或型号
  if (form.value.isModel === 1 && !form.value.modelRemark && modelList.value?.length <= 0) {
    isAllow = false;
    ElMessage({
      message: "请上传模型文件或者填写模型授权链接/型号",
      type: "error"
    });
  }

  return isAllow;
};
const getAttrForm = () => {
  console.log("有无模型===", modelList.value);

  const modelFile = {
    modelRemark: form.value.isModel === 1 ? form.value.modelRemark : "",
    modelIds: form.value.isModel === 1 ? modelList.value?.map(item => item.uid)?.join(",") || "" : ""
  };

  return new Promise((resolve, reject) => {
    formRef.value.validate(async (valid, fields) => {
      if (valid) {
        const flag = await myValidator();
        // console.log(909090909, flag);
        if (flag) {
          console.log("基础信息数据===", form.value);
          console.log("Level3Lists====", Level3Lists.value);
          const params = {
            isModel: form.value.isModel, //有无模型
            modelFile, //模型文件和模型授权链接或型号
            customType: form.value.customType, //是否支持定制 2-支持 1-不支持
            customTemplateId: form.value.customType === 2 ? form.value.customTemplateId : null, //当前定制模版
            factoryId: "", //工厂id
            brandId: form.value.brandId ? form.value.brandId : null, //商品品牌
            appearTime: form.value.appearTime ? form.value.appearTime : null, //上市时间
            // factoryGrade: form.value.factoryGrade, //工厂定位
            // productStyle: form.value.productStyle, //款式风格
            isShow: form.value.isShow, //商品显示销量
            statsList: [], //属性列表
            warrantyFlag: Number(form.value.warrantyFlag), //质保模板状态  1：有质保 2：没有质保
            warrantyId: Number(form.value.warrantyFlag) === 2 ? null : String(form.value.warrantyId), //质保模板id
            warrantyName: Number(form.value.warrantyFlag) === 2 ? null : String(form.value.warrantyName), //质保模板name
            warrantyTime: Number(form.value.warrantyFlag) === 2 ? null : form.value.warrantyTime, //质保时间
            buinessAddress: form.value.buinessAddress || [] //产地
          };
          /**
           * 处理属性start
           */
          const inputArr = [];
          const otherArr = [];
          const MultipleArr = [];
          for (let item of attrList.value) {
            if (item.stasType === 1 || item.stasType === 4) {
              const { editDetailInfo } = _optionInfo.value;
              const resInputObj = editDetailInfo?.statsList.filter(_item => _item.stastsId === item.stastsId)[0];
              const inputObj = {
                productStastId: resInputObj?.productStastId || "",
                stastsId: item.stastsId,
                stastsName: item.statsTitle,
                stastsValId: item.stastsId,
                stastsVal: form.value[item.stastsId + "-val2"],
                stasType: item.stasType
              };
              inputArr.push(inputObj);
            }
          }
          for (let item2 of Level3Lists.value) {
            if (item2) {
              // 找一级
              // console.log("找一级=========", item2?.options3);
              const level1Obj = attrList.value.filter(_item => {
                if (_item.stastsId === item2?.options3[0]?.parentId) {
                  return _item;
                }
              })[0];
              let obj = {
                stastsId: level1Obj?.stastsId,
                stastsName: level1Obj?.statsTitle
              };
              for (let _item2 of item2.options3) {
                // console.log(222222222, _item2);
                const __item2 = JSON.parse(JSON.stringify(_item2));
                const parentArr = orgChildIdFindParent(__item2.stastsId, attrList.value, "stastsId");
                // console.log("找到父级了===", parentArr);
                if (__item2.stasType === 1 || __item2.stasType === 4) {
                  const inputItem = {
                    productStastId: __item2?._productStastIds ? __item2?._productStastIds[0]?.split("-")[0] : "",
                    ...obj,
                    stastsValId: __item2.stastsId,
                    stastsVal: __item2.selectVal,
                    stasType: __item2.stasType
                  };
                  otherArr.push(inputItem);
                } else if (__item2.stasType === 2) {
                  // console.log("AAAAAAAAAAA", __item2);
                  const selectItem = {
                    productStastId: __item2?._productStastIds ? __item2?._productStastIds[0]?.split("-")[0] : "",
                    ...obj,
                    stastsValId: __item2.selectVal ? __item2.selectVal : __item2.stastsId,
                    stastsVal: __item2.selected3?.length > 0 ? __item2.selected3[0].statsTitle : __item2.statsTitle,
                    stasType:
                      __item2.children.length > 0 && !(__item2.stasType === 1 || __item2.stasType === 4)
                        ? __item2.stasType
                        : parentArr[0].stasType
                  };
                  otherArr.push(selectItem);
                } else if (__item2.stasType === 3) {
                  if (__item2?.selected3 && __item2?.selected3.length > 0) {
                    for (let item3 of __item2?.selected3 || []) {
                      const _item3 = JSON.parse(JSON.stringify(item3));
                      const curProductStastId = __item2?._productStastIds.filter(pSid => pSid.includes(_item3.stastsId));
                      const mulObj = {
                        productStastId: curProductStastId ? curProductStastId[0]?.split("-")[0] : "",
                        ...obj,
                        stastsVal: _item3.statsTitle,
                        stastsValId: _item3.stastsId,
                        stasType:
                          __item2.children.length > 0 && !(__item2.stasType === 1 || __item2.stasType === 4)
                            ? __item2.stasType
                            : parentArr[0].stasType
                      };
                      MultipleArr.push(mulObj);
                    }
                  } else {
                    MultipleArr.push({
                      productStastId: __item2?._productStastIds ? __item2?._productStastIds[0]?.split("-")[0] : "",
                      ...obj,
                      stastsVal: __item2.statsTitle,
                      stastsValId: __item2.stastsId,
                      stasType:
                        __item2.children.length > 0 && !(__item2.stasType === 1 || __item2.stasType === 4)
                          ? __item2.stasType
                          : parentArr[0].stasType
                    });
                  }
                }
              }
            }
          }
          params.statsList = params.statsList.concat([...inputArr, ...otherArr, ...MultipleArr]);
          /**
           * 处理属性end
           */

          /**校验规范数值是否全部填写完整 */
          const flag = validateAttr(JSON.parse(JSON.stringify(params.statsList)));
          if (!flag) {
            /**校验规格项是否选择完整 */
            ElMessage({
              message: "请填写完整规范数值相关配置",
              type: "error",
              offset: 60
            });
            return;
          }
          /**如果支持定制，校验定制模版必填 */
          if (form.value.customType === 2 && !form.value?.customTemplateId) {
            return ElMessage({
              message: "请选择定制模版",
              type: "error",
              offset: 60
            });
          }

          console.log("产地===", form.value);
          console.log("bbbbbbbbbbb", params);
          resolve(params);
        }
      } else {
        ElMessage({
          message: "请将必填项填写后再预览商品"
        });
        // reject("error");
        // Object.keys(fields).forEach((key, i) => {
        //   if (i == 0) {
        //     const firstFiled = fields[key][0].field;
        //     formRef.value.scrollToField(firstFiled);
        //   }
        // });
      }
    });
  });
};
const validateAttr = arr => {
  let flag = true; //属性是否都做了有效选择
  for (let item of arr) {
    if (item.stastsVal && item.stasType === 4) {
      const arr = item.stastsVal.split(","); //可能会包含空或者undefined
      const _arr = arr.filter(item => {
        if (item) {
          return item;
        }
      });
      if (arr.length !== _arr.length) {
        flag = false;
      }
    }
  }
  return flag;
};
defineExpose({
  getAttrForm
});
</script>

<style lang="scss" scoped>
.custom-content {
  :deep(.el-select__wrapper) {
    background-color: white;
  }
  & > div {
    border: 1px solid #dcdfe6;
    border-bottom: none;
    & > header {
      background-color: #f5f7fa;
      border-bottom: 1px solid #dcdfe6;
      line-height: 50px;
      padding: 0 20px;
    }
    .list-wrap {
      padding: 20px;
      border-bottom: 1px solid #dcdfe6;
      & > div {
        background-color: #f5f7fa;
        border-radius: 4px;
        & > header {
          padding: 10px 20px;
        }
        .list {
          border-top: 1px solid #e2e8f0;
          padding: 10px 20px;
          .list-item {
            background-color: white;
            padding: 14px 20px;
          }
          & > div:not(:last-of-type) {
            margin-bottom: 5px;
          }
        }
      }
    }
  }
}
.model-name {
  word-wrap: break-word;
  line-height: 20px;
  width: 60px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-transform: none;
}
:deep(.el-upload-list.el-upload-list--picture-card) {
  .el-upload-list__item-actions {
    background-color: rgba(0, 0, 0, 0.5) !important;
    background-image: none !important;
    cursor: default !important;
    display: inline-flex !important;
    font-size: 20px !important;
    height: 100% !important;
    justify-content: center !important;
    left: 0 !important;
    position: absolute !important;
    top: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
  .el-upload-list__item-delete {
    opacity: 1 !important;
    display: block !important;
    top: -16px !important;
    right: -4px !important;
    position: absolute !important;
    .el-icon {
      background-color: red !important;
      border-radius: 50%;
    }
  }
  .el-upload.el-upload--picture-card {
    width: 80px;
    height: 80px;
  }
  .el-upload-list__item {
    width: 80px;
    height: 80px;
  }
}
.model-wrap {
  border: 1px solid #dcdfe6;
  header {
    height: 50px;
    background-color: #f5f7fa;
    display: flex;
    align-items: center;
  }
  .upload-wrap {
    padding: 12px 16px;
    border-top: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
  }
}
:deep(.el-form-item__label) {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
:deep(.zb-item) {
  label {
    line-height: 18px;
  }
  .el-form-item__content > div .el-input__wrapper {
    box-shadow: 0 0 0 1px #f2f3f5 inset !important;
  }
  .el-form-item__label {
    white-space: wrap;
    overflow: visible;
  }
}
.warranty-wrap {
  margin-top: -18px;
  margin-bottom: 18px;
  .select-box {
    border: 1px solid #f2f3f5;
    border-top: none;
    padding: 16px 20px;
    box-sizing: border-box;
    border-radius: 4px;
    :deep(.el-radio-group) {
      width: 100%;
      padding: 8px 20px;
      box-sizing: border-box;
      background-color: #f5f7fa;
      display: flex;
      justify-content: space-between;
    }
    :deep(.el-form-item) {
      margin-bottom: 0;
      margin-top: 18px;
    }
  }
}
.attr-form-item {
  :deep(.el-form-item__content) {
    & > div {
      .el-input__wrapper,
      .el-select__wrapper {
        box-shadow: 0 0 0 1px #dcdfe6 inset;
      }
    }
  }
}
.el-select.attr-el-select {
  width: 60%;
}
.del-icon {
  vertical-align: middle;
}
.model-uploader {
  :deep(.el-upload) {
    width: 100%;
    height: 80px;
    justify-content: flex-start;
    background-color: #f2f3f5;
  }
}
.buiness-address {
  :deep(.el-form-item__content) {
    display: block;
  }
}
</style>
